<template>
  <div >
    <div class="plate-number-wrapper">

      <!-- 省份选择 -->
      <el-select
        v-model="province"
        placeholder="省份"
        :disabled="disabled"
        @change="handleProvinceChange"
      >
        <el-option
          v-for="item in provinceList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>

      <!-- 车牌号输入 -->
      <el-input
        v-model="plateBody"
        :disabled="disabled"
        :placeholder="placeholder"
        :maxlength="maxLength"
        @input="handleInput"
        @blur="validatePlate"
      />

    </div>
    <!-- 校验提示 -->
    <div v-if="errorMsg" class="error-msg">
      {{ errorMsg }}
    </div>
  </div>
</template>

<script>
// 省份简称列表
const PROVINCES = [
  '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑',
  '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂',
  '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青',
  '藏', '川', '宁', '琼', '使', '领'
]

export default {
  name: 'PlateNumberInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'normal', // normal/new-energy
      validator: val => ['normal', 'new-energy'].includes(val)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入车牌号'
    }
  },
  data() {
    return {
      province: '',
      plateBody: '',
      errorMsg: '',
      provinceList: PROVINCES
    }
  },
  computed: {
    // 根据车牌类型计算最大长度
    maxLength() {
      return this.type === 'new-energy' ? 7 : 6
    },
    // 完整车牌号（计算属性）
    fullPlateNumber() {
      return this.province + this.plateBody
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          this.province = ''
          this.plateBody = ''
          return
        }
        // 解析已有车牌号
        this.province = newVal.charAt(0)
        this.plateBody = newVal.slice(1)
      }
    }
  },
  methods: {


    handleInput(val) {
      this.plateBody = val.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
      const fullPlateNumber = this.province + this.plateBody;

      // 触发 input 事件，返回完整车牌号（兼容 v-model）
      this.$emit('input', fullPlateNumber);

      // 额外触发 change 事件，返回拆分后的数据
      this.$emit('change', {
        plateNumber: fullPlateNumber,  // 完整车牌号（如 "京A12345"）
        province: this.province,      // 省份（如 "京"）
        plateBody: this.plateBody,    // 车牌号主体（如 "A12345"）
      });
    },

    handleProvinceChange() {
      const fullPlateNumber = this.province + this.plateBody;
      this.$emit('input', fullPlateNumber);

      this.$emit('change', {
        plateNumber: fullPlateNumber,
        province: this.province,
        plateBody: this.plateBody,
      });

      this.validatePlate();
    },


    // // 修改 handleInput 方法，确保触发 input 事件
    // handleInput(val) {
    //   this.plateBody = val.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
    //   const fullPlateNumber = this.province + this.plateBody;
    //   this.$emit('input', fullPlateNumber); // 触发 input 事件，传递完整车牌号
    // },
    //
    // // 修改 handleProvinceChange 方法同理
    // handleProvinceChange() {
    //   const fullPlateNumber = this.province + this.plateBody;
    //   this.$emit('input', fullPlateNumber); // 触发 input 事件
    //   this.validatePlate();
    // },

    // // 省份变更处理
    // handleProvinceChange() {
    //   this.$emit('input', this.fullPlateNumber)
    //   this.validatePlate()
    // },
    //
    // // 输入处理（自动格式化）
    // handleInput(val) {
    //   // 过滤非法字符
    //   this.plateBody = val.replace(/[^A-Za-z0-9]/g, '').toUpperCase()
    //   this.$emit('input', this.fullPlateNumber)
    // },

    // 车牌校验
    validatePlate() {
      if (!this.province) {
        this.errorMsg = '请选择省份'
        return false
      }

      const plate = this.fullPlateNumber

      // 普通车牌正则
      const normalReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/

      // 新能源车牌正则
      const newEnergyReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z]([0-9]{5}[DF]|[DF][A-HJ-NP-Z0-9][0-9]{4})$/

      const isValid = this.type === 'new-energy'
        ? newEnergyReg.test(plate)
        : normalReg.test(plate)

      this.errorMsg = isValid ? '' : '请输入有效的车牌号'
      return isValid
    }
  }
}
</script>

<style scoped>
.plate-number-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plate-number-wrapper >>> .el-select {
  width: 120px;
}

.error-msg {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 0; /* 移除上边距 */
  order: 1; /* 确保错误信息在最后显示 */
}
</style>